<template>
  <tbc-dialog title="商品模型" ref="dialog" basic>

    <tbc-pagination :total="total" :config="{page, size}" simple @change="loadDataList">
      <template #left>
        <div>
          <el-input placeholder="模型名称" class="short" v-model="keyword" clearable
                    style="margin-right:10px;width:200px;" size="small"></el-input>
          <el-button
              icon="el-icon-search" type="primary" size="small"
              @click="$refs.page.init(1)">查询
          </el-button>
          <el-button
              icon="el-icon-refresh-left" size="small"
              @click="onButtonClick({type_id: '', type_name: ''})">清除
          </el-button>
        </div>
      </template>
    </tbc-pagination>

    <div class="data-container">
      <tbc-dynamic-table
          v-loading="loading"
          maxHeight="500px"
          :data="dataList"
          :cols="[
          {label: '名称', prop: 'model_name'},
          {label: '属性', prop: 'attr_name'},
          {label: '排序', prop: 'sort_weight', align: 'center'},
          {label: '状态', prop: 'status', type: 'switch', align: 'center'},
          {label: '操作', prop: 'action', type: 'action', width: 80, fixed: 'right',
          click: onButtonClick,button: [
              {label: '选择', type: 'text'}
          ]}]">
      </tbc-dynamic-table>
    </div>
    <tbc-pagination :total="total" :config="{page, size}" @change="loadDataList"/>
  </tbc-dialog>
</template>
<script lang="ts">
import {defineComponent, ref, Ref} from 'vue'
import useGoodsModel from './api/goodsModel'

export default defineComponent({

  name: 'goods-model-selector',

  emits: ['choice'],

  setup(props, {emit}) {
    const model = useGoodsModel()
    const dialog: Ref = ref(null)

    const show = () => {
      dialog.value.show();
      if (!(model.dataList as unknown as Record<string, string>[]).length) model.loadDataList()
    }

    const close = () => {
      dialog.value.close()
    }

    const onButtonClick = (data) => {
      emit('choice', data)
      close()
    }

    return {
      ...model,
      dialog,
      show,
      close,
      onButtonClick
    }
  }
})
</script>
